<template>
  <div class="table-container">
    <table>
      <thead>
      <tr>
        <th style="text-align: center;width: auto;white-space: nowrap" v-for="(header, index) in headers" :key="index">
          {{ header }}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row, rowIndex) in data" :key="rowIndex">
        <td style="text-align: center" v-for="(cell, cellIndex) in row" :key="cellIndex">
          {{ cell }}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "TableComponent",
  props: {
    headers: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  th{
    background: rgba(255,255,255,.05);
  }
}
tbody{
  tr{
    background: rgba(255,255,255,.05);
  }
  tr:nth-child(odd){
    background:none;
  }
}

th, td {
  border: none;
  padding: 8px;
  text-align: left;
  color: white;
  font-size: 12px;
}

th {
  font-weight: bold;
}
</style>
